import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { TagTwoTone } from '@ant-design/icons';
import { Card, Spin } from 'antd';
import { findAllCategories } from '@/api/category';
import css from './index.module.less';

export default function Index() {
	const item = sessionStorage.getItem('info')
	const info = JSON.parse(item);
	const [categories, setCategories] = useState([]);
	const [current, setCurrent] = useState(1);
	const [size, setSize] = useState(5);
	const [total, setTotal] = useState(5);
	const [spinning, setSpinning] = useState(true);


	useEffect(() => {
		const id = info.id;
		findAllCategories(current, size, id).then((res) => {
			setSpinning(true);
			if (res.code === 200) {
				setCategories(res.data.categoryDtos);
				setTotal(res.data.total);
				setSpinning(false);
			}
		})
	}, []);
	const navigate = useNavigate();
	const toDetail = (category) => {
		navigate(`/categoryDetail/${category.title}/${category.id}`);
	}
	return (
		<Card className={css.content}>
			<Spin tip='Loading...' spinning={spinning} className={css.spinning} />
			<h1>分类</h1>
			<div>
				{categories.length === 0? <></> :
					categories.map((category, index) => {
						return (
							<div key={index} className={css.category} onClick={() => toDetail(category)}>
								<TagTwoTone />
								<span className={css.title}>{category.title}</span>
								<span className={css.total}>({category.blogTotal})</span>
							</div>
						)
					})
				}
			</div>
		</Card>
	)
}
